<script setup lang="ts">
import {deleteRouter, getRouterTree} from "@/api/router-api.ts";
import type {RouterType} from "@/type/router-type.ts";
import {ref} from "vue";
import {RowOptionEnum, type TableType} from "@/type/table-type.ts";
import MoyuTable from "@/compontents/moyu-table.vue";
import RouterOptionDialog from "@/views/compontents/router-option-dialog.vue";
import {ElMessageBox} from "element-plus";
import {useRouter} from "vue-router";
import { Search, Plus } from '@element-plus/icons-vue'

// table加载标识
const tableLoading = ref<boolean>(false)
// 列表配置
const routerTableColumns = ref<TableType[]>([
  {label: '路由名称', prop: 'routerName'},
  {label: '路由绝对路径', prop: 'routerFullPath', type: "link", link: {prop: 'routerFullPath', baseUrl: import.meta.env.VITE_BASE_URL, target: '_blank'}},
  {label: '路由相对路径', prop: 'routerPath'},
  {
    label: '是否为请求路由',
    prop: 'isRequest', type: 'tag', tag: {typeObj: {true: 'success', false: 'danger'}}, dict: {false: '否', true: '是'}
  },
  {
    label: '请求方式',
    prop: 'requestMethod',
    type: 'tag',
    tag: {typeObj: {GET: 'success', POST: 'warning', PUT: 'primary', DELETE: 'danger', HEAD: 'info'}}
  },
])


// 路由列表
const routerList = ref<RouterType[]>([])
/**
 * 获取路由列表信息
 */
const getRouterHandler = async () => {
  tableLoading.value = true
  try {
    const res = await getRouterTree({})
    routerList.value = res.data
  } finally {
    tableLoading.value = false
  }
}
getRouterHandler()

//路由操作弹窗
const routerOptionRef = ref()
/**
 * 路由操作
 * @param option 操作类型
 * @param routerData 路由信息
 */
const routerOptionHandler = (option: RowOptionEnum, routerData: RouterType | undefined) => {
  routerOptionRef.value.showDialog()
  routerOptionRef.value.initRouterData(option, routerData)
}

/**
 * 删除路由
 * @param routerData 路由信息
 */
const deleteRouterHandler = async (routerData: RouterType) => {
  // 提示是否删除
  try {
    await ElMessageBox.confirm('将删除此条路由信息，是否继续', '删除提示', {
      confirmButtonText: '确认删除',
      type: 'warning'
    })
  } catch (e) {
    return
  }
  await deleteRouter(routerData.routerId as string)
  await getRouterHandler()
}

const router = useRouter()

/**
 * 跳转到接口文档中
 * @param row
 */
const toDocApiHandler = (row:RouterType) => {
  const page = router.resolve({
    name: 'DocApi',
    params: {
      routerId: row.routerId
    }
  })
  // 浏览器小窗打开
  window.open(page.href, '_blank', 'width=600,height=800,scrollbars=yes,resizable=yes')
}
</script>

<template>
  <div class="search">
    <el-button :icon="Search" type="primary" @click="getRouterHandler">查询</el-button>
    <el-button :icon="Plus" @click="routerOptionHandler(RowOptionEnum.ADD,undefined)">新增</el-button>
  </div>
  <moyu-table :data="routerList"
              :columns="routerTableColumns"
              row-key="routerId"
              :loading="tableLoading"
              optionWidth="280px"
  >
    <template #options="{row}">
      <el-button type="primary" link @click="routerOptionHandler(RowOptionEnum.DETAIL, row)">查看</el-button>
      <el-button v-if="row.isRequest" type="primary" link @click="toDocApiHandler(row)">接口文档</el-button>
      <el-button type="primary" link @click="routerOptionHandler(RowOptionEnum.UPDATE, row)">修改</el-button>
      <el-button type="primary" link @click="routerOptionHandler(RowOptionEnum.ADD, row)">新增</el-button>
      <el-button type="danger" link @click="deleteRouterHandler(row)">删除</el-button>
    </template>
  </moyu-table>
  <router-option-dialog ref="routerOptionRef" @close="getRouterHandler"/>
</template>

<style scoped>
.search{
  margin-bottom: 16px;
}
</style>
